<template>
  <el-card class="box-card"
           :body-style="{ 'padding-top': '0px' }">
    <div slot="header"
         class="clearfix">
      <bread :navone="'商品管理'"
             :navtwo="'商品分类'" />
    </div>
    <el-button type="success"
               plain>添加分类</el-button>
    <!-- 分类表格 -->
    <el-table :data="tableddd"
    v-loading='loading'
              style="width: 100%;margin-bottom: 20px;"
              row-key="id"
              border
              :tree-props="{children: 'children', hasChildren: 'children'}">
      <!-- 树形结构 -->
      <el-table-tree-column file-icon='icon icon-file'
                            folder-icon='icon icon-folder'
                            prop="cat_name"
                            label="分类名称"
                            width="180"
                            treeKey="cat_id"
                            parentKey="cat_pid"
                            levelKey="cat_level">
      </el-table-tree-column>
      <el-table-column label="级别"
                       width="180">
        <template slot-scope="scope">
          {{scope.row.cat_level === 0 ? '一级': scope.row.cat_level === 1 ? '二级' : '三级'}}
        </template>
      </el-table-column>
      <el-table-column label="是否有效">
        <template slot-scope="scope">
          {{scope.row.cat_deleted ? '无效' : '有效'}}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template>
          <el-button type="primary"
                     icon="el-icon-edit"
                     size='mini'
                     plain></el-button>
          <el-button type="danger"
                     icon="el-icon-delete"
                     size='mini'
                     plain></el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"
                   :current-page="currentPage"
                   :page-sizes="[5, 10, 15]"
                   :page-size="pagesize"
                   layout="total, sizes, prev, pager, next, jumper"
                   :total="total">
    </el-pagination>
  </el-card>
</template>

<script>
import bread from '../bread/bread.vue'
export default {
  components: {
    bread
  },
  created () {
    this.getcate()
  },
  data () {
    return {
      tableData: [], // 分类表数据
      tableddd: [],
      total: null, // 分类总数
      pagesize: 5, // 页容量
      currentPage: 1, // 当前页
      loading: true

    }
  },
  methods: {
    // 获取所有商品分类
    async getcate () {
      let res = await this.$http.get('categories')
      let { meta, data } = res.data
      if (meta.status === 200) {
        this.tableData = data
        this.total = data.length
        this.fenye()
      }
    },
    // 根据页容量和总数分页
    fenye () {
      let start = this.pagesize * (this.currentPage - 1)
      let end = this.pagesize * this.currentPage
      this.tableddd = this.tableData.slice(start, end)
      this.loading = false
    },
    // 当当前页容量改变时触发
    handleSizeChange (val) {
      this.pagesize = val
      this.fenye()
    },
    // 当当前页数改变时触发
    handleCurrentChange (val) {
      this.currentPage = val
      this.fenye()
    }
  }
}
</script>

<style>
</style>
